<template>
  <el-dialog
    v-model="visible"
    :title="`${paramsProps.title}`"
    :destroy-on-close="true"
    width="580px"
    draggable
    append-to-body
  >
    <el-alert
      v-if="paramsProps?.isBatch"
      title="警告信息"
      type="warning"
      show-icon
      description="批量功能会忽略用户原岗位，以最终提交数据为准！！"
      :closable="false"
      class="el-alert"
    />
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :model="paramsProps"
      @submit.enter.prevent="handleSubmit"
      class="form__label"
      style="padding: 10px"
    >
      <el-form-item label="用户" prop="leaderIds">
        <el-tag class="user-item" v-for="user in selectedList" :key="user.id" type="info">
          {{ user.username }}
        </el-tag>
      </el-form-item>
      <el-form-item label="岗位" prop="postId">
        <el-select v-model="postIds" multiple placeholder="请选择岗位" clearable style="width: 90%">
          <el-option
            v-for="post in postList"
            :key="post.postId"
            :label="post.postName"
            :value="post.postId"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false"> 取消</el-button>
      <el-button type="primary" @click="handleSubmit"> 确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { type ElForm, ElMessage } from 'element-plus'
import { getSysPostOptionApi } from '@/api/modules/system/sysPost'
import { bindUserPostApi } from '@/api/modules/system/user'
import type { IUser } from '@/api/interface/system/user'
import type { ISysPost } from '@/api/interface/system/sysPost'

defineOptions({
  name: 'UserDeptForm'
})
const postList = ref<ISysPost.Row[]>([])

const selectIds = ref<number[]>([])
const selectedList = ref<IUser.Info[]>([])

const postIds = ref<number[]>([])

const visible = ref(false)
const paramsProps = ref<View.DefaultParams>({
  title: '',
  row: {},
  api: undefined,
  getTableList: undefined
})

const loadParentMenus = () => {
  getSysPostOptionApi().then((res) => {
    postList.value = res.data
  })
}

// 接收父组件传过来的参数
const acceptParams = (params: View.DefaultParams) => {
  paramsProps.value = params

  selectIds.value = params?.selectIds
  selectedList.value = params?.selectedList
  postIds.value = params.postIds
  visible.value = true
  loadParentMenus()
}

const rules = reactive({
  id: [{ required: true, message: '请选择岗位' }]
})

const emit = defineEmits(['submit'])

// 提交数据（新增/编辑）
const ruleFormRef = ref<InstanceType<typeof ElForm>>()
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return
    try {
      const param = {
        userIds: selectIds.value,
        postIds: postIds.value
      }
      await bindUserPostApi(param).then(() => paramsProps.value.getTableList!())
      ElMessage.success({ message: `${paramsProps.value.title}成功！` })
      emit('submit')
      visible.value = false
    } catch (error) {
      console.log(error)
    }
  })
}

defineExpose({
  acceptParams
})
</script>

<style scoped lang="scss">
.user-item {
  margin: 5px;
}

.el-alert {
  width: 90%;
  margin: 0 auto;
}
</style>
